<script setup lang="ts">
import flatPickr from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import { Mandarin } from "flatpickr/dist/l10n/zh.js";

const props = withDefaults(
  defineProps<{
    mode: "date" | "time" | "datetime";
  }>(),
  { mode: "date" }
);

const baseConfig = {
  locale: Mandarin,
  time_24hr: true,
  disableMobile: false,
  allowInput: false,
  // 强制移动不使用原生组件
  //   disable: [
  //     {
  //       from: "1970-01-01",
  //       to: "1970-01-02",
  //     },
  //   ],
};
const dateConfig = { dateFormat: "Y-m-d", ...baseConfig };
const timeConfig = {
  dateFormat: "H:i:S",
  enableTime: true,
  noCalendar: true,
  enableSeconds: true,
  ...baseConfig,
};
const datetimeConfig = {
  dateFormat: "Y-m-d H:i:S",
  enableTime: true,
  enableSeconds: true,
  ...baseConfig,
};

const flatConfig = computed(() => {
  switch (props.mode) {
    case "date":
      return dateConfig;
    case "time":
      return timeConfig;
    case "datetime":
      return datetimeConfig;
  }
});

const modelValue = defineModel<string | Date | null>({ required: true });
</script>

<template>
  <flat-pickr v-model="modelValue" :config="flatConfig" @on-close="" />
</template>
